<template>
    <view class="page">
        <!-- title:页面标题
			isBack：返回按键 需要传true 默认不显示
		-->
        <back :title="'添加地址'" :isBack="true"></back>
        <view class="mapSearch_box">
            <view class="mapsearch_left_box">
                <text style="margin-right: 8rpx;">西安</text><u-icon name="arrow-down-fill" color="rgba(56, 56, 56, 1)"
                    size="20"></u-icon>
            </view>
            <view class="mapsearch_right_box">
                <input type="text" placeholder="输入地址" @input="nearby_search" v-model="changeValue">
            </view>
        </view>

        <view class="lianxiang_box" v-if="suggestion.length > 0">
            <view class="dange_lx_box" v-for="(item, index) in suggestion" :key="index" @click="backfill(item)">
                <view class="dange_lx_top_box">
                    <view class="dres_name_box">
                        <u-icon name="map-fill" color="rgba(199, 199, 199, 1)" size="32"
                            style="margin-right: 14rpx;"></u-icon>
                        {{ item.title }}
                    </view>
                    <view class="juli_box">{{ (item.distance * 0.001).toFixed(3) }}km</view>
                </view>
                <view class="dange_lx_bot_box">{{ item.address }}
                </view>
            </view>
        </view>
        <map id="myMap" style="width:.5rpx;height:.5rpx;" :longitude="longitude" :latitude="latitude" scale='16'>
        </map>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            // 经度
            longitude: '',
            // 纬度
            latitude: '',
            markers: [],
            // 腾讯地图实例
            qqmapsdk: '',
            // 输入框值
            changeValue: '',
            // 联想值
            suggestion: [],
            // 防抖
            time: null
        }
    },
    onShow() {
        this.getLocation()
    },
    methods: {
        // 获取定位 生成地图实例
        getLocation() {
            // 作用域问题
            const that = this
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    console.log('当前位置的经度：' + res.longitude)
                    console.log('当前位置的纬度：' + res.latitude)
                    that.longitude = res.longitude
                    that.latitude = res.latitude
                    that.qqmapsdk = new that.TMap({
                        key: 'YVYBZ-TUWL4-PTEUN-DAV24-O6AS2-F5FXQ'
                    });
                    let mks = [];
                    mks.push({ // 获取返回结果，放到mks数组中
                        title: '当前定位',
                        id: '9999',
                        latitude: res.latitude,
                        longitude: res.longitude,
                        iconPath: "", //图标路径
                        width: 20,
                        height: 20
                    })
                    that.markers = mks
                }
            })
        },
        nearby_search() {
            const that = this;
            if (that.changeValue == '') {
                that.suggestion = []
            }
            that.time = setTimeout(() => {
                that.qqmapsdk.search({
                    //搜索关键词
                    keyword: that.changeValue,
                    //设置周边搜索中心点 
                    // 设置就是以这里为中心点搜索，注释掉也可以，以地图为中心搜索
                    // location: '39.980014,116.313972',
                    //搜索成功后的回调
                    success: (res) => {
                        console.log(res, "res")
                        that.suggestion = res.data
                        let mks = []
                        for (let i = 0; i < res.data.length; i++) {
                            mks.push({ // 获取返回结果，放到mks数组中
                                title: res.data[i].title,
                                distance: res.data[i]._distance,
                                address: res.data[i].address,
                                city: res.data[i].ad_info.city,
                                district: res.data[i].ad_info.district,
                                province: res.data[i].ad_info.province,
                                id: res.data[i].id,
                                latitude: res.data[i].location.lat,
                                longitude: res.data[i].location.lng,
                                category: res.data[i].category
                            })
                        }
                        //设置markers属性，将搜索结果显示在地图中
                        // that.markers = mks
                        that.suggestion = mks

                    },
                    fail: function (res) {
                        console.log(res);
                    },
                    complete: function (res) {
                        console.log(res);
                    }
                });
            }, 2000)
        },
        // 联想值的点击事件
        backfill(items) {
            console.log(items)
            this.$store.state.insterPep = {
                location: items.title,
                lng: items.longitude,
                lat: items.latitude,
                bigHouse: items.address
            }
            uni.navigateBack({ delta: 2 })
            // uni.navigateTo({
            //     url: '/userPage/adress/modif?latitude=' + items.latitude + '&longitude=' + items.longitude + '&dy=' + true
            // })
            // console.log('12', items.longitude);
            // console.log('23', items.latitude);
            // that.longitude = items.longitude
            // that.latitude = items.latitude
            // that.suggestion.forEach(item => {
            //     if (item.id == items.id) {
            //         that.changeValue = item.title
            //         let mks = []
            //         mks.push({ // 获取返回结果，放到mks数组中
            //             title: items.title,
            //             id: items.id,
            //             latitude: items.latitude,
            //             longitude: items.longitude,
            //             iconPath: "", //图标路径
            //             width: 20,
            //             height: 20
            //         })
            //         //设置markers属性，将搜索结果显示在地图中
            //         that.suggestion = []
            //         that.markers = mks
            //         console.log(this.markers)
            //     }
            // })

        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .mapSearch_box {
        width: 100vw;
        height: 120rpx;
        // margin-top: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 52rpx 0 28rpx;
        background-color: rgba(255, 255, 255, 1);
        margin-bottom: 20rpx;

        .mapsearch_left_box {
            width: 100rpx;
            height: 84rpx;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 84rpx;
            color: rgba(0, 0, 0, 1);
        }

        .mapsearch_right_box {
            width: 570rpx;
            height: 84rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18rpx;
            background: rgba(243, 244, 244, 1);

            input {
                width: 530rpx;
                height: 40rpx;
                caret-color: rgba(26, 194, 121, 1);
            }
        }
    }

    .lianxiang_box {
        width: 704rpx;
        opacity: 1;
        border-radius: 26rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-bottom: 24rpx;

        .dange_lx_box {
            width: 628rpx;
            height: 124rpx;
            border-bottom: 4rpx solid rgba(240, 240, 240, 1);
            margin: auto;
            box-sizing: border-box;
            padding-top: 24rpx;

            .dange_lx_top_box {
                width: 100%;
                height: 46rpx;
                display: flex;
                justify-content: space-between;
                margin-bottom: 4rpx;

                .dres_name_box {
                    width: 380rpx;
                    height: 46rpx;
                    line-height: 46rpx;
                    font-size: 32rpx;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .juli_box {
                    width: 200rpx;
                    height: 46rpx;
                    line-height: 46rpx;
                    text-align: right;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                }
            }

            .dange_lx_bot_box {
                width: 100%;
                height: 38rpx;
                line-height: 38rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(166, 166, 166, 1);
                box-sizing: border-box;
                padding-left: 42rpx;
            }
        }

    }

}
</style>